<template>
    <img :src="mapImgs.y0.x0.src" width="400" height="300" :x="mapImgs.y0.x0.x" :y="mapImgs.y0.x0.y"></img>
    <img :src="mapImgs.y0.x1.src" width="400" height="300" :x="mapImgs.y0.x1.x" :y="mapImgs.y0.x1.y"></img>
    <img :src="mapImgs.y0.x2.src" width="400" height="300" :x="mapImgs.y0.x2.x" :y="mapImgs.y0.x2.y"></img>
    <img :src="mapImgs.y1.x0.src" width="400" height="300" :x="mapImgs.y1.x0.x" :y="mapImgs.y1.x0.y"></img>
    <img :src="mapImgs.y1.x1.src" width="400" height="300" :x="mapImgs.y1.x1.x" :y="mapImgs.y1.x1.y"></img>
    <img :src="mapImgs.y1.x2.src" width="400" height="300" :x="mapImgs.y1.x2.x" :y="mapImgs.y1.x2.y"></img>
    <img :src="mapImgs.y2.x0.src" width="400" height="300" :x="mapImgs.y2.x0.x" :y="mapImgs.y2.x0.y"></img>
    <img :src="mapImgs.y2.x1.src" width="400" height="300" :x="mapImgs.y2.x1.x" :y="mapImgs.y2.x1.y"></img>
    <img :src="mapImgs.y2.x2.src" width="400" height="300" :x="mapImgs.y2.x2.x" :y="mapImgs.y2.x2.y"></img>
</template>

<script>
data(){
    return {
        cellX: 32,//格子像素
		cellY: 32,
        info: {
            mapId: 3,//地图编号
			picW: 400,//单张图片像素宽
			picH: 300,
			maxW: 9200,//地图总像素宽
			maxH: 6300
        },
        mapImgs: {//4x4的图片就能包裹所有地图图片
            y0: {
                x0: {src: "res/ui/colorBg.png", x: -400, y: -300},
                x1: {src: "res/ui/colorBg.png", x: 0, y: -300},
                x2: {src: "res/ui/colorBg.png", x: 400, y: -300},
                x3: {src: "res/ui/colorBg.png", x: 800, y: -300}
            },
            y1: {
                x0: {src: "res/ui/colorBg.png", x: -400, y: 0},
                x1: {src: "res/ui/colorBg.png", x: 0, y: 0},
                x2: {src: "res/ui/colorBg.png", x: 400, y: 0},
                x3: {src: "res/ui/colorBg.png", x: 800, y: 0}
            },
            y2: {
                x0: {src: "res/ui/colorBg.png", x: -400, y: 300},
                x1: {src: "res/ui/colorBg.png", x: 0, y: 300},
                x2: {src: "res/ui/colorBg.png", x: 400, y: 300},
                x3: {src: "res/ui/colorBg.png", x: 800, y: 300}
            },
            y3: {
                x0: {src: "res/ui/colorBg.png", x: -400, y: 600},
                x1: {src: "res/ui/colorBg.png", x: 0, y: 600},
                x2: {src: "res/ui/colorBg.png", x: 400, y: 600},
                x3: {src: "res/ui/colorBg.png", x: 800, y: 600}
            }
        },
        mapNode: {},
        moveStep: {x: 0, y: 0},//移动步伐
        moveOffset: {x: 0, y: 0},//移动偏移
    }
}

create() {
    console.log("map create");
}

update(delta) {
    if(this.moveOffset.x != 0 || this.moveOffset.y != 0){//逐步移向目标点
        for (let yk in this.mapImgs) {
            for (let xk in this.mapImgs[yk]) {
                this.mapImgs[yk][xk].x += this.moveStep.x;
                this.mapImgs[yk][xk].y += this.moveStep.y;
            }
        }
        this.moveOffset.x -= this.moveStep.x;
        this.moveOffset.y -= this.moveStep.y;
        //console.log(this.moveOffset.x, this.moveOffset.y);
        if(this.moveOffset.x == 0 && this.moveOffset.y == 0){//到达目标点 更新坐标给角色类
            player.info.x -= this.moveStep.x;
            player.info.y -= this.moveStep.y;
            this.loadMap(this.info.mapId, player.info.x, player.info.y);//更新地图图片
        }
    }
}

destroyed() {
    
}

loadMap(mapId, x, y) {
    let imgInfo = this.roleXYFormat(x, y);
    this.info.mapId = mapId;
    this.setImgSrc(imgInfo.xId, imgInfo.yId, imgInfo.pyX, imgInfo.pyY);
}

roleMove(x, y) {//设定移动偏移
    this.moveStep = {x: x, y: y};
    this.moveOffset.x = x * this.cellX;
    this.moveOffset.y = y * this.cellY;
}

roleXYFormat(x, y) {
    let inX = x * this.cellX;//(全图)人物所在像素点X
    let inY = y * this.cellY;
    let xId = Math.ceil(inX / this.info.picW);//人物所在图片ID
    let yId = Math.ceil(inY / this.info.picH);
    let pyX = xId * this.info.picW - inX;//像素偏移
    let pyY = yId * this.info.picH - inY;
    return {xId: xId, yId: yId, pyX: pyX, pyY: pyY};
}

setImgSrc(xId, yId, pyX, pyY) {
    for (let indexX = 0; indexX < 4; indexX++) {
        for (let indexY = 0; indexY < 4; indexY++) {
			let picFile = "res/map/" + this.info.mapId + "/" + (yId + indexY - 1) + "_" + (xId + indexX - 1) + ".jpg"
			this.mapImgs["y"+indexY]["x"+indexX].src = picFile;
            this.mapImgs["y"+indexY]["x"+indexX].x = (indexX - 1) * 400 + pyX;
            this.mapImgs["y"+indexY]["x"+indexX].y = (indexY - 1) * 300 + pyY;
        }
    }
}
</script>